<script>
export default {
  created() {
    if(localStorage.getItem("userId")){
      this.shopping_init()
    }else {
      this.$message.error("请登录！")
      this.$router.push("/login")
    }
  },
  data() {
    return {
      goods_list: [],
      total_price: 0, // 商品总价
      count: 0, // 购物车总数量
    }
  },
  methods: {
    // 购物车初始方法
    async shopping_init() {
      const { data: res } = await this.$http.get(
        '/flower-shopping/init/' + localStorage.getItem('userId')
      )
      if (res.code != 1) {
        // 表示未登录
        this.$message.error(res.msg)
        this.$router.push('/login')
      } else {
        if (res.data != null) {
          // 判断不是空
          this.goods_list = res.data
          this.count_price()
        }
      }
    },
    // 清空数据
    clear() {
      this.total_price = 0
      this.count = 0
    },
    // 当改变数量时改变价格
    count_price() {
      this.clear()
      for (var i = 0; i < this.goods_list.length; i++) {
        this.total_price +=this.goods_list[i].shoppingCount * this.goods_list[i].shoppingPrice
        this.count += this.goods_list[i].shoppingCount
      }
    },
    // 删除商品
    async delete_goods(goodsId) {
      const { data: res } = await this.$http.delete(
        'flower-shopping/delete/' +
          goodsId +
          '/' +
          localStorage.getItem('userId')
      )
      if (res.code != 1) {
        this.$message.error(res.msg)
      } else {
        this.$message.success(res.data)
        this.shopping_init() // 刷新界面
      }
    },
    open() {
      this.$confirm('你确认支付' + this.total_price + '元', '付款', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
             this.$http.post("/flower-shopping/insert",this.goods_list).then((res)=>{
              if(res.data.code == 1){
                // 表示成功，跳转订单页面
                this.$message.success(res.data.data)
                // 跳转订单页面
                this.$router.push("/order")
              }else {
                // 失败
                this.$message.error(res.data.msg)
              }
             })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消支付',
          })
        })
    },
  },
}
</script>
<template>
  <div class="app">
    <header>
      <a href="/"><img src="../images/logo.png" /></a>
    </header>
    <section>
      <h1>
        购物车（全部<span>{{ count }}</span
        >）
      </h1>
      <table>
        <tr>
          <td>商品信息</td>
          <td>单价</td>
          <td>数量</td>
          <td>金额</td>
          <td>操作</td>
        </tr>
        <tr class="li_goods" v-for="(item, index) in goods_list" :key="index">
          <td>
            <div class="goods_style">
              <img :src="$api + '/common/download/' + item.shoppingImg" />
              <span>{{ item.shoppingName }}</span>
            </div>
          </td>
          <td>￥{{ item.shoppingPrice }}</td>
          <td>
            <el-input-number
              v-model="item.shoppingCount"
              :min="1"
              @change="count_price()"
            ></el-input-number>
          </td>
          <td style="font-weight: 700; color: red">
            ￥{{ item.shoppingNumprice * item.shoppingCount }}
          </td>
          <td><a href="#" @click="delete_goods(item.goodsId)">删除</a></td>
        </tr>
      </table>
      <footer>
        <div>
          <span
            >合计：<label style="color: red; font-weight: 700">{{
              total_price
            }}</label></span
          >
          <button type="text" @click="open">结算</button>
        </div>
      </footer>
    </section>
  </div>
</template>

<style lang="less" scoped>
@import url('@/views/css/shopping.less');
</style>
